import React from "react"

export default class Footer extends React.Component {
    handleClick = (type) => {
        this.props.changeType(type)
    }
    render () {
        const { list, type }  = this.props
        if(list.length === 0) return null

        const leftCounter = list.filter(item => item.isDone === false)
        return (
            <footer className="footer">
            <span className="todo-count"><strong>{leftCounter.length}</strong> 未完成</span>
            <ul className="filters">
                <li>
                    <a href="#/"
                    className={type === 'all' ? 'selected' : ''}
                    onClick={() => this.handleClick('all')}
                    >所有</a>
                </li>
                <li>
                    <a href="#/active" 
                    className={type === 'active' ? 'selected' : ''}
                    onClick={() => this.handleClick('active')}
                    >待办</a>
                </li>
                <li>
                    <a href="#/completed" 
                    className={type === 'completed' ? 'selected' : ''}
                    onClick={() => this.handleClick('completed')}>已完成</a>
                </li>
            </ul>
            <button className="clear-completed">清空已完成</button>
        </footer>)
    }
}

